<template>
	<view class="container">
		<view class="flexbox borderBox rowRange" :style="'background:rgba(255,255,255,'+ scrollTop/100 +');'">
			<view class="leftimgbox rowRange" @tap="back()">
				<view class="shadow rowRanges" :style="'background:rgba(0,0,0,'+ (0.6-scrollTop/100) +');'">
					<view :style="'color:' + ((scrollTop/100)>0.5?'#222222;':'#ffffff;')"><text class="iconfont icon-zuo"></text></view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<!-- 商品主图 -->
		<view class="hdWrap">
			<view class="topSwiper-container rowRange borderBox">
				<swiper class="swiper-container" :duration="500" :current='currentIndex' @change="swiperChange">
					<swiper-item v-for="(item,index) in goodInfo.images" :key="index">
						<view class="swiper-item defImg">
							<image :src="item" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="pagetopBar-container rowRange">
					<view class="topbarbox"></view>
				</view>
				<view class="currentbox rowRanges">
					<view>{{currentIndex+1}}/{{goodInfo.images.length}}</view>
				</view>
			</view>
		</view>

		<!-- 商品详情 -->
		<view class="sectionWrap">
			<view class="trade-name-container">
				<text v-if="goodInfo.shoptype == 'B'"
					style="color: #FFFFFF;background: #FF2638;font-size: 24upx;padding-left: 12upx;padding-right: 12upx;border-radius: 16upx;margin-right: 8upx;padding-top: 4upx;padding-bottom: 4upx;">
					<text>天猫</text>
				</text>
				<text v-if="goodInfo.shoptype != 'B'"
					style="color: #FFFFFF;background: #FF2638;font-size: 24upx;padding-left: 12upx;padding-right: 12upx;border-radius: 16upx;margin-right: 8upx;padding-top: 4upx;padding-bottom: 4upx;">
					<text>淘宝</text>
				</text>
				<text class="tradename">
					{{ goodInfo.itemtitle }}
				</text>
			</view>
			<view class="secDesc juli">{{goodInfo.itemsale}}人已购买</view>
			<view class="rowRangeAve priceInfo">
				<view style="font-size: 24rpx;color: #FF4242;">
					¥
					<text style="font-size: 40rpx;">{{ goodInfo.itemprice }}</text>
					<text class="secDesc" style="margin-left: 5rpx;">
						券后
						<text style="text-decoration: line-through;margin-left: 20rpx;">¥{{goodInfo.itemendprice}}</text>
					</text>
				</view>
			</view>
			<view class="quanWrap" v-if="goodInfo.couponmoney>0 || goodInfo.couponmoney>0">
				<image src="../../static/img/goods/qbg.png" mode='aspectFit' class="quanBg"></image>
				<view class="quanCon rowRangeEnd">
					<view class="quanPrice rowRanges">
						<text style="font-size: 32rpx;">{{goodInfo.couponmoney}}</text>
						元
					</view>
					<view class="colRange quanSc">
						<view class="quanName">优惠券使用期限</view>
						<view class="quanDate">{{goodInfo.start_time}}~{{goodInfo.end_time}}</view>
					</view>
					<view class="quanBtn rowRanges" @tap="getCoupon()">立即领券</view>
				</view>
			</view>
			<view class="gaoyongWrap" v-if="goodInfo.itemdesc">
				<view class="gaoyongTitle">推荐语</view>
				<view class="gaoyongCon gaoyongVal" v-html="goodInfo.itemdesc">
				</view>
			</view>
		</view>
		
		<!-- 店铺 -->
		<view style="width:100%;height: 98upx;background-color:#F2F2F2;">
			<view v-if="goodInfo.shopname"
				style="float: right;height: 68upx;width:100%;background-color:#FFFFFF;float: right; line-height: 68upx;margin-top: 16upx;margin-bottom:16upx;display:  flex;">
				<view style="margin-right:60upx ;margin-left: 20upx;">店铺</view>
				<image style="height: 40upx;width:40upx;margin-top: 6px;margin-right: 4upx;"
					src="../../static/img/shop.png"></image>
				<view>{{ goodInfo.shopname }}</view>
			</view>
		</view>
		<!-- 相关推荐 -->
		<view class="recommendWrap" v-if="platform==1 && recommendList.length>0">
			<view class="recommendTitle">相关推荐</view>
			<scroll-view scroll-x>
				<view class="recommendList rowRange">
					<view class="recommendItem" v-for="(items,index) in recommendList" :key="index" @tap="goDetails(items)">
						<image class="recommendImg" :src="items.itempic"></image>
						<view class="recommendName u-line-2">{{items.itemshorttitle}}</view>
						<view class="couponbac-box colRanges">
							<view>{{items.couponmoney}}元券</view>
						</view>
						<view class="recommendPrice rowEnd">
							<view class="rmbicon">
								&yen;
							</view>
							<view class="price">
								{{items.itemendprice}}
							</view>
							<s>
								&yen;{{items.itemendprice}}
							</s>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 商品详情 -->
		<view class="goodDetail">
			<!-- 此处应该是富文本 -->
			<view class="detailsTitle-container rowRanges">
				<view class="border"></view>
				<view class="detTxt">
					商品详情
				</view>
				<view class="border"></view>
			</view>
			<view class="detailImgList colRange">
				<block v-for="(items,index) in goodInfo.images"
				 :key="index">
					<image class="detailpic" :src="items" mode="widthFix"></image>
				</block>
			</view>
		</view>
		
		<view class="bottombox">
		</view>
		
		<!-- 分享/购买 -->
		<view class="footerWrap rowSta">
			<view class="footBar-container rowRangeAve borderBox">
				<view class="left-content icon-content rowRanges">
					<view class="iconContent backHomeIcon colRange" @tap='goindex()'>
						<view class="iconbox defImg">
							<image src="../../static/img/goods/home.png" mode="aspectFill"></image>
						</view>
						<view class="text">
							首页
						</view>
					</view>
					<view class="iconContent collectIcon colRange" @tap="saveCollect()">
						<view class="iconbox defImg">
							<image v-if="isCollect" src="../../static/img/goods/collect_yes.png" mode="aspectFill"></image>
							<image v-else src="../../static/img/goods/collect_no.png" mode="aspectFill"></image>
						</view>
						<view class="text">
							{{isCollect?'已收藏':'收藏'}}
						</view>
					</view>
				</view>
		
				<view class="right-container rowRange borderBox">
					<view class="leftsharebox btnbox colRanges" @tap="goShare()">
						<view class="texttips">
							分享
						</view>
					</view>
					<view class="rightbackbox btnbox colRanges" @tap="getCoupon()">
						<view class="texttips">
							领券购买
						</view>
					</view>
				</view>
			</view>
		</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				currentIndex: '',
				//商品信息
				goodInfo:{
					images:[]
				},
				//商品ID
				itemid:'',
				//推荐商品
				recommendList: [],
				//平台
				platform: '1',
				pageInfo: {},
				JdDetails: [],
				detailText: '',
				//是否收藏
				isCollect: false,

				shakeprof: true
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onLoad(e) {
			if (e.itemid) {
				this.itemid = e.itemid;
				this.getGoodInfo();
				this.getRecommend();
			} else {
				var json = JSON.parse(e.info);
				console.log(json);
				this.itemid = json.itemid;
				this.platform = Number(json.platform)
			}
			this.getGoodInfo();
		},
		methods: {
			goindex(){
				uni.switchTab({
					url: '../index/index'
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			formatTime:function(now){
				let arrs = now.split(" ");
				return arrs[0];
			},
			formatDate: function(now) {
				const year = now.getFullYear();
				const month = now.getMonth() + 1;
				const date = now.getDate();
				return year + '-' + month + '-' + date;
			},
			//获取商品详情
			getGoodInfo:function(e){
				//淘宝
				if(this.platform == 1){
					this.getTbGoodInfo();
				//京东
				}else if(this.platform == 3){
					this.getJdGoodInfo();
				//拼多多
				}else if(this.platform == 4){
					this.getPddGoodInfo();
				}
				//判断是否收藏
				this.getCollectInfo();
			},
			//获取京东商品详情
			getJdGoodInfo:function(e){
				let that = this;
				uni.showLoading({
				    title: '加载中...'
				});
				this.$u.api.jdItemDetail({
					skuIds: this.itemid
				}).then((res) => {
					if (res.code == 0 && res.data.length > 0){
						var obj = res.data[0];
						if (obj.detailImages && obj.detailImages.length > 0) {
							obj.images = [];
							for (let i = 0; i < res.data[0].detailImages.length; i++) {
								obj.images.push('https:' + res.data[0].detailImages[i]);
							}
						} else {
							obj.images = [];
							obj.images.push(obj.picMain);
						}
						if (obj.couponStartTime && obj.commissionEndTime) {
							obj.start_time = this.formatTime(obj.couponStartTime);
							obj.end_time = this.formatTime(obj.commissionEndTime);
						}
						obj.itemsale = obj.inOrderCount > 10000 ? (obj.inOrderCount / 10000).toFixed(
							1) + '万' : obj.inOrderCount;
						obj.itempic = obj.picMain;
						obj.itemprice = obj.originPrice;
						obj.itemtitle = obj.skuName;
						obj.itemendprice = obj.actualPrice;
						obj.couponmoney=obj.couponAmount;
						this.goodInfo = obj;
						this.isCollect = res.collect;
						//保存足迹
						this.saveFootprint({'itemId':this.goodInfo.itemid,'itemTitle':this.goodInfo.itemtitle,'platform':this.platform,'itemSale':this.goodInfo.itemsale,"itemPrice":this.goodInfo.itemprice,"itemendPrice":this.goodInfo.itemendprice,"couponMoney":this.goodInfo.couponmoney,"startTime":this.goodInfo.start_time,"endTime":this.goodInfo.end_time,"itemDesc":this.goodInfo.itemdesc,"shopName":this.goodInfo.shopname,"imgs":this.goodInfo.images.join(','),"shopType":this.goodInfo.shoptype,"thumbnail":this.goodInfo.images.join(',')});
						try {
							//原价
							this.itemprice = res.data[0].originPrice;
							this.itemtitle = res.data[0].skuName;
							this.itemendprice = res.data[0].actualPrice;
							//获取淘口令
							
						} catch (e) {
							console.log(e);
						}
					} else {
						uni.showModal({
							title: '加载失败',
							showCancel: false,
							content: res.msg,
							success(res) {
								if (res.confirm) {
									uni.navigateBack();
								}
							}
						});
					}
					uni.hideLoading();
				})
			},
			//获取tb商品详情
			getTbGoodInfo:function(e){
				let that = this;
				uni.showLoading({
				    title: '加载中...'
				});
				this.$u.api.tbItemDetail({
					itemid: this.itemid
				}).then((res) => {
					if (res.code == 1){
						if (res.data.taobao_image && res.data.taobao_image.length > 0) {
							let images = res.data.taobao_image.split(',');
							res.data.images = [];
							for (let i = 0; i < images.length; i++) {
								res.data.images.push(images[i]);
							}
						} else {
							res.data.images = [];
							res.data.images.push(res.data.itempic);
						}
						if (res.data.start_time && res.data.end_time) {
							res.data.start_time = this.formatDate(new Date(res.data.start_time * 1000));
							res.data.end_time = this.formatDate(new Date(res.data.end_time * 1000));
						}
						res.data.itemsale = res.data.itemsale > 10000 ? (res.data.itemsale / 10000).toFixed(
							1) + '万' : res.data.itemsale;
						res.data.itempic = 'https://' + res.data.itempic.split('://')[1];
						this.goodInfo = res.data;
						this.isCollect = res.collect;
						//保存足迹
						this.saveFootprint({'itemId':this.goodInfo.itemid,'itemTitle':this.goodInfo.itemtitle,'platform':this.platform,'itemSale':this.goodInfo.itemsale,"itemPrice":this.goodInfo.itemprice,"itemendPrice":this.goodInfo.itemendprice,"couponMoney":this.goodInfo.couponmoney,"startTime":this.goodInfo.start_time,"endTime":this.goodInfo.end_time,"itemDesc":this.goodInfo.itemdesc,"shopName":this.goodInfo.shopname,"imgs":this.goodInfo.images.join(','),"shopType":this.goodInfo.shoptype,"thumbnail":this.goodInfo.images.join(',')});
						try {
							this.itemprice = res.data.itemprice;
							this.itemtitle = res.data.itemtitle;
							this.itemendprice = res.data.itemendprice;
							//获取淘口令
						} catch (e) {
							console.log(e);
						}
					} else {
						uni.showModal({
							title: '加载失败',
							showCancel: false,
							content: res.msg,
							success(res) {
								if (res.confirm) {
									uni.navigateBack();
								}
							}
						});
					}
					uni.hideLoading();
				})
			},
			//获取拼多多商品详情
			getPddGoodInfo:function(e){
				let that = this;
				uni.showLoading({
				    title: '加载中...'
				});
				this.$u.api.pddItemDetail({
					goodsSign: this.goodsSign
				}).then((res) => {
					if (res.code == 200){
						if (res.data.goods_gallery_urls && res.data.goods_gallery_urls.length > 0) {
							let images = res.data.goods_gallery_urls;
							res.data.images = [];
							for (let i = 0; i < images.length; i++) {
								res.data.images.push(images[i]);
							}
						} else {
							res.data.images = [];
							res.data.images.push(res.data.goods_image_url);
						}
						if (res.data.mall_coupon_start_time && res.data.mall_coupon_end_time) {
							res.data.mall_coupon_start_time = this.formatDate(new Date(res.data.mall_coupon_start_time * 1000));
							res.data.mall_coupon_end_time = this.formatDate(new Date(res.data.mall_coupon_end_time * 1000));
						}
						res.data.sales_tip = res.data.sales_tip > 10000 ? (res.data.sales_tip / 10000).toFixed(
							1) + '万' : res.data.sales_tip;
						
						res.data.itempic = res.data.goods_image_url;
						//原价
						res.data.itemprice = res.data.min_normal_price;
						res.data.itemtitle = res.data.goods_name;
						//卷后价
						res.data.itemendprice = res.data.coupon_discount;
						//优惠卷
						res.data.couponmoney= res.data.coupon_discount;
						
						this.goodInfo = res.data;
						this.isCollect = res.collect;
						//保存足迹
						this.saveFootprint({'itemId':this.goodInfo.itemid,'itemTitle':this.goodInfo.itemtitle,'platform':this.platform,'itemSale':this.goodInfo.itemsale,"itemPrice":this.goodInfo.itemprice,"itemendPrice":this.goodInfo.itemendprice,"couponMoney":this.goodInfo.couponmoney,"startTime":this.goodInfo.start_time,"endTime":this.goodInfo.end_time,"itemDesc":this.goodInfo.itemdesc,"shopName":this.goodInfo.shopname,"imgs":this.goodInfo.images.join(','),"shopType":this.goodInfo.shoptype,"thumbnail":this.goodInfo.images.join(',')});
						try {
							this.itemprice = res.data.itemprice;
							this.itemtitle = res.data.itemtitle;
							this.itemendprice = res.data.itemendprice;
							//获取淘口令
						} catch (e) {
							console.log(e);
						}
					} else {
						uni.showModal({
							title: '加载失败',
							showCancel: false,
							content: res.msg,
							success(res) {
								if (res.confirm) {
									uni.navigateBack();
								}
							}
						});
					}
					uni.hideLoading();
				})
			},
			swiperChange(e) {
				this.currentIndex = e.detail.current
			},
			//获取推荐
			getRecommend(){
				this.$u.api.similarInfo({
					itemid: this.itemid,
				}).then((res) => {
					if (res.code == 1){
						this.recommendList = res.data;
					}
				})
			},
			//是否收藏
			getCollectInfo() {
				this.$u.api.user.collectInfo({
					itemid: this.itemid,
				}).then((res) => {
					if (res.code == 200){
						if(res.data){
							this.isCollect = true
						} else {
							this.isCollect = false
						}
					}
				})
			},
			//保存收藏
			async saveCollect() {
				this.$u.api.user.collectInsert({'itemId':this.goodInfo.itemid,'itemTitle':this.goodInfo.itemtitle,'platform':this.platform,'itemSale':this.goodInfo.itemsale,"itemPrice":this.goodInfo.itemprice,"itemendPrice":this.goodInfo.itemendprice,"couponMoney":this.goodInfo.couponmoney,"startTime":this.goodInfo.start_time,"endTime":this.goodInfo.end_time,"itemDesc":this.goodInfo.itemdesc,"shopName":this.goodInfo.shopname,"imgs":this.goodInfo.images.join(','),"shopType":this.goodInfo.shoptype,"thumbnail":this.goodInfo.images.join(',')}).then((res) => {
					if(res.code == 200){
						this.isCollect = true
						this.$refs.uToast.show({
							title: '收藏成功',
							type: 'success',
						})
					}
				})
			},
			//保存足迹
			async saveFootprint(obj) {
				this.$u.api.user.footprintInsert(obj).then((res) => {

				})
			},
			//分享商品
			goShare(){
				this.goodInfo.platform = this.platform;
				uni.navigateTo({
					url: './share?info=' + encodeURIComponent(JSON.stringify(this.goodInfo))
				})
			},
			//领券
			getCoupon(){
				//淘宝
				if(this.platform == 1){
					this.tbLink();
				//京东
				}else if(this.platform == 3){
					this.jdLink();
				//拼多多
				}else if(this.platform == 4){
					this.pddLink();
				}
			},
			//淘宝优惠卷连接
			tbLink(){
				this.$u.api.tbPrivilegeLink({
					goodsId: this.goodInfo.itemid
				}).then((res) => {
					if (res.code != 0){
						this.$u.toast(res.msg);
						return;
					}
					var couponClickUrl = res.data.couponClickUrl;
					//#ifdef H5
						window.location.href=couponClickUrl
					//#endif
					
					// #ifdef APP-PLUS
					if (plus.os.name == 'Android') {
						console.log(plus.os.name);
						plus.runtime.openURL(couponClickUrl, res => {
							uni.showModal({
								content: "本机未检测到淘宝客户端，是否打开浏览器访问？",
								success: res => {
									if (res.confirm) {
										plus.runtime.openURL(couponClickUrl)
									}
								}
							})
						}, 'com.taobao.taobao');
					} else {
						var http = couponClickUrl
						couponClickUrl = couponClickUrl.split('//')[1]
						plus.runtime.openURL('taobao://' + couponClickUrl, function(res) {
							uni.showModal({
								content: "本机未检测到淘宝客户端，是否打开浏览器访问？",
								success: res => {
									if (res.confirm) {
										uni.navigateTo({
											url: '../webView/webView?url=' + encodeURIComponent(http)
										})
									}
								}
							})
						}, 'taobao://');
					}
					// #endif
				})
			},
			//京东优惠卷连接
			jdLink(){
				this.$u.api.jdPrivilegeLink({
					goodsId: this.goodInfo.itemid
				}).then((res) => {
					if (res.code != 200){
						this.$u.toast(res.msg);
						return;
					}
					var url = res.data.shortUrl
					if (url.substr(0, 5) === 'https') {
						let data = {
							category: 'jump',
							des: 'getCoupon',
							url: url.substr(8)
						}
						//var jdurl = `openApp.jdMobile://virtual?params=${JSON.stringify(data)}`;
					} else if (url.substr(0, 4) === 'http') {
						let data = {
							category: 'jump',
							des: 'getCoupon',
							url: url.substr(7)
						}
						//var jdurl = `openApp.jdMobile://virtual?params=${JSON.stringify(data)}`;
					}
					// #ifdef APP-PLUS
					plus.runtime.openURL('openApp.jdMobile://virtual?params=' + encodeURIComponent('{"des":"m","url":"' + url +
						'","category":"jump"}'), res => {
						console.log(res);
						uni.showModal({
							content: "本机未检测到京东客户端，是否打开浏览器访问？",
							success: res => {
								if (res.confirm) {
									plus.runtime.openURL(url)
								}
							}
						})
					}, 'com.jingdong.app.mall');
					// #endif
				})
			},
			//拼多多优惠卷连接
			pddLink(){
				this.$u.api.pddPrivilegeLink({
					classifyType: 0,
					parentId: 0
				}).then((res) => {
					if (res.code != 200){
						this.$u.toast(res.msg);
					}
					const pddurl = res.schemaUrl
					const h5pddurl = res.weAppWebViewShortUrl
					// #ifdef APP-PLUS
					if (plus.os.name == 'Android') {
						plus.runtime.openURL(pddurl, res => {
							console.log(res);
							uni.showModal({
								content: "本机未检测到拼多多客户端，是否打开浏览器访问？",
								success: res => {
									if (res.confirm) {
										plus.runtime.openURL(h5pddurl)
									}
								}
							})
						}, 'com.xunmeng.pinduoduo');
					} else {
						plus.runtime.launchApplication({
							action: "pinduoduo://com.xunmeng.pinduoduo/" + pddurl.replace(/https:\/\/.*\//, "")
						}, res => {
							uni.showModal({
								content: "本机未检测到拼多多客户端，是否打开浏览器访问？",
								success: res => {
									if (res.confirm) {
										plus.runtime.openURL(h5pddurl)
									}
								}
							})
						})
					}
					// #endif
				})
			}
		
		}
	};
</script>

<style>
	page {
		background-color: #F1F0F5;
	}
</style>
<style lang="scss" scoped>
	uni-view, uni-scroll-view, uni-swiper, uni-button, uni-input, uni-textarea, uni-label, uni-navigator, uni-image{
		box-sizing: border-box;
	}
	.title{
		display: flex;
		align-items: center;
	}
	.leftimgbox{
		width: 100%;
		height: 63px;
	}
	.shadow {
	    width: 35px;
	    height: 35px;
	    font-size: 19px;
	    border-radius: 50%;
	}
	.rowRange{
		display: flex;
		align-items: center;
	}
	.container {
		.flexbox {
			position: fixed;
			z-index: 100;
			width: 100%;
			padding: 0 32rpx;

			.leftimgbox {
				width: 100%;
				height: 90rpx;

				.shadow {
					width: 50rpx;
					height: 50rpx;
					font-size: 28rpx;
					border-radius: 50%;
				}
			}
		}

		.hdWrap {
			height: 750rpx;
			position: relative;

			.topSwiper-container {
				width: 100%;
				height: 750rpx;
				position: relative;

				.swiper-container {
					width: 100%;
					height: 100%;

					.swiper-item {
						width: 100%;
						height: 100%;
					}
				}

				.currentbox {
					position: absolute;
					width: 60rpx;
					height: 30rpx;
					border-radius: 15rpx;
					bottom: 10rpx;
					right: 30rpx;
					background: rgba(0, 0, 0, 0.3);
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
				}

				.pagetopBar-container {
					width: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
			}

			// .hdZujian {
			// 	position: absolute;
			// 	width: 100%;
			// 	top: 0;

			// 	.topbarbox {
			// 		display: flex;
			// 		width: 100%;
			// 		height: var(--status-bar-height);
			// 		background-color: transparent;
			// 	}
			// }
		}

		.sectionWrap {
			padding: 40rpx 32rpx 30rpx;
			background-color: #FFFFFF;

			.scTitleWrap {
				.scTitle {
					width: 46rpx;
					height: 46rpx;

					.scTitleImg {
						width: 46rpx;
						height: 46rpx;
					}
				}

				.scTitleText {
					font-size: 32rpx;
					margin-left: 10rpx;
				}
			}

			.trade-name-container {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;

				image {
					width: 60rpx;
					height: 24rpx;
					margin-right: 10rpx;
					margin-top: 8rpx;
				}

				.tradename {
					font-size: 30rpx;
					font-weight: 400;
					color: #333333;
				}
			}

			.priceInfo {
				margin-bottom: 30rpx;
			}

			.secDesc {
				color: #999999;
				font-size: 24rpx;
			}

			.juli {
				margin: 20rpx 0 25rpx;
			}

			.scBtns {
				.scBtn {
					border-radius: 10rpx;
					font-size: 20rpx;
					color: #FFFFFF;
					padding: 5rpx 15rpx;
				}

				.scBtn1 {
					background: linear-gradient(-90deg, #FC3653, #F87721);
				}

				.scBtn2 {
					background: linear-gradient(-90deg, #7619EC, #A429F3);
					margin-left: 10rpx;
				}
			}

			.shenjiWrap {
				position: relative;
				font-size: 24rpx;
				margin: 39rpx 0 20rpx;

				.shenjiNew {
					width: 686rpx;
					height: 70rpx;
					line-height: 70rpx;
					background: #FFF2CF;
					border-radius: 5rpx;
					color: #593A0F;
					padding-left: 10rpx;
				}

				.shenjiBtn {
					position: absolute;
					top: 16rpx;
					right: 20rpx;
					background: rgba($color: #000000, $alpha: 0.6);
					border-radius: 20rpx;
					width: 150rpx;
					height: 40rpx;

					.shenjiImg {
						width: 27rpx;
						height: 24rpx;
					}

					.sehnjiText {
						margin-left: 6rpx;
						color: #FFFFFF;
					}
				}
			}

			.quanWrap {
				position: relative;
				color: #FFFFFF;

				.quanBg {
					width: 686rpx;
					height: 140rpx;
				}

				.quanCon {
					position: absolute;
					top: 0;
					width: 686rpx;
					height: 140rpx;

					.quanPrice {
						font-size: 34rpx;
					}

					.quanSc {
						width: 340rpx;

						.quanName {
							font-size: 28rpx;
						}

						.quanDate {
							width: 280rpx;
							height: 40rpx;
							line-height: 40rpx;
							text-align: center;
							background: rgba($color: #FDF6F6, $alpha: 0.2);
							border-radius: 20rpx;
							font-size: 20rpx;
							margin-top: 6rpx;
							white-space: nowrap;
						}
					}

					.quanBtn {
						font-size: 28rpx;
						width: 210rpx;
						height: 90rpx;
						text-align: center;
						border-left: 2rpx dotted #FFFFFF;
					}
				}
			}

			.gaoyongWrap {
				width: 686rpx;
				background-color: #FFEDED;
				border-radius: 16rpx;
				color: #FFFFFF;
				margin-top: 30rpx;
				padding-bottom: 24rpx;

				.gaoyongTitle {
					border-radius: 16rpx 0 20rpx;
					background-color: #FF4242;
					width: 150rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					font-size: 28rpx;
				}

				.gaoyongCon {
					margin: 14rpx 18rpx 20rpx;
					font-size: 24rpx;
					line-height: 38rpx;
					color: #FF4242;
				}
			}
		}

		.qijianWrap {
			margin: 20rpx 0 30rpx;
			background-color: #FFFFFF;
			padding: 30rpx 32rpx;

			.qianjianHd {
				.qijianLeft {
					.qjLfImg {
						width: 120rpx;
						height: 120rpx;
					}

					.qijianInfo {
						height: 120rpx;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: space-around;
						margin-left: 20rpx;

						.qijianName {
							font-size: 28rpx;
							color: #000000;
						}

						.tianmaoLogo {
							width: 150rpx;
							height: 20rpx;
						}

						.qijianGuang {
							font-size: 24rpx;
							color: #FF4242
						}
					}
				}

				.qijianRight {
					.qijianBtn {
						width: 180rpx;
						height: 46rpx;
						line-height: 46rpx;
						text-align: center;
						background: linear-gradient(-90deg, #FC3653, #F87721);
						border-radius: 20rpx;
						color: #FFFFFF;
						font-size: 24rpx;
					}

					.qjRgImg {
						width: 12rpx;
						height: 22rpx;
						margin-left: 20rpx;
					}
				}
			}

			.qianjianFt {
				margin-top: 20rpx;

				.pingjiaKey {
					color: #999999;
					font-size: 24rpx;
				}

				.pingjiaImg {
					width: 28rpx;
					height: 28rpx;
					margin-left: 6rpx;
				}
			}
		}

		// 相关推荐
		.recommendWrap {
			margin-bottom: 30rpx;
			background-color: #FFFFFF;
			padding: 40rpx 32rpx;

			.recommendTitle {
				font-size: 32rpx;
				margin-left: 8rpx;
			}

			.recommendList {
				margin-top: 20rpx;

				.recommendItem {
					width: 220rpx;
					height: 100%;
					margin-right: 20rpx;

					.recommendImg {
						width: 220rpx;
						height: 220rpx;
						border-radius: 8rpx;
					}

					.recommendName {
						font-size: 28rpx;
						box-sizing: border-box;
						width: 100%;
						color: #444444;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.couponbac-box {
						width: 100rpx;
						height: 30rpx;
						background-image: linear-gradient(9deg,
							#f8261d 0%,
							#fe4e04 100%),
							linear-gradient(#ffe3e3,
							#ffe3e3);
						background-blend-mode: normal,
							normal;
						border-radius: 5rpx;
						font-size: 20rpx;
						color: #FFFFFF;
						font-weight: normal;
						font-stretch: normal;
						margin: 6rpx 0;
					}

					.recommendPrice {
						color: #fe3738;
						font-size: 30rpx;
						line-height: 34rpx;
						width: 100%;

						.rmbicon {
							font-size: 20rpx;
							line-height: 24rpx;
						}

						s {
							font-size: 22rpx;
							line-height: 26rpx;
							color: #999999;
							margin-left: 10rpx;
						}
					}
				}
			}
		}

		.goodDetail {
			width: 100%;

			.detailsTitle-container {
				width: 100%;
				height: 90rpx;
				background-color: #FFFFFF;

				.detTxt {
					font-size: 30rpx;
					color: #333333;
					margin: 0 60rpx;
				}

				.border {
					height: 2rpx;
					width: 80rpx;
					background-color: #666666;
				}
			}

			.detailImgList {
				width: 100%;

				.detailpic {
					width: 100%;
				}
			}
		}

		.bottombox {
			width: 100%;
			height: 110rpx;
			margin-top: 20rpx;
			height: calc(110rpx + constant(safe-area-inset-bottom));
			height: env(110rpx + constant(safe-area-inset-bottom));
		}

		// 文章推荐
		.selectedWrap {
			margin-bottom: 110rpx;

			.selectedTitle {
				margin-top: 50rpx;
				font-size: 32rpx;
				color: #333333;
				text-align: center;
			}

			.selectedList {
				padding: 10rpx 32rpx 30rpx;
				flex-wrap: wrap;

				.selectedItem {
					width: 48.5%;
					background-color: #FFFFFF;
					padding: 10rpx;
					margin-top: 20rpx;

					.goodsLeft {
						margin-top: 2rpx;

						.goodsLogo {
							width: 313rpx;
							height: 310rpx;
						}
					}

					.goodsRight {
						.goodsTitle {
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;

							.tianmao {
								width: 50rpx;
								height: 24rpx;
								margin-right: 6rpx;
							}

							.goodsName {
								width: 82%;
								font-size: 24rpx;
							}
						}

						.goodsPrice {
							color: #999999;
							font-size: 24rpx;
							margin-top: 6rpx;

							.unit {
								color: #EB4559;
								margin-left: 8rpx;
							}

							.price {
								color: #EB4559;
								font-size: 36rpx;
								font-weight: bold;
							}
						}

						.quanList {
							margin-top: 20rpx;

							.quan1 {
								position: relative;

								.quan1Img {
									width: 106rpx;
									height: 34rpx;
								}

								.quan1Text {
									position: absolute;
									top: 0;
									width: 100%;
									text-align: center;
									color: #FF4242;
									font-size: 24rpx;
								}
							}

							.quan2 {
								width: 100rpx;
								height: 34rpx;
								line-height: 30rpx;
								text-align: center;
								background: linear-gradient(-90deg, #7619EC, #A429F3);
								color: #FFFFFF;
								font-size: 24rpx;
								border-radius: 6rpx;
								margin-left: 10rpx;
							}
						}

						.yishou {
							color: #999999;
							font-size: 24rpx;
							margin-top: 10rpx;
						}
					}
				}

				.selectedItem:nth-of-type(2n) {
					margin-left: 20.5rpx;
				}
			}
		}

		.footerWrap {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #FFFFFF;
			height: 110rpx;
			height: calc(110rpx + constant(safe-area-inset-bottom));
			height: env(110rpx + constant(safe-area-inset-bottom));

			.footBar-container {
				height: 100rpx;
				padding: 0 32rpx;

				.left-content {
					width: 190rpx;

					.iconContent {
						.iconbox {
							width: 38rpx;
							height: 38rpx;
							margin-bottom: 5rpx;
						}

						.text {
							font-size: 20rpx;
							font-weight: 400;
							color: #666666;
						}
					}

					.collectIcon {
						margin-left: 60rpx;
					}
				}

				.right-container {
					width: 490rpx;
					height: 80rpx;
					border-radius: 40rpx;
					overflow: hidden;

					.btnbox {
						width: 50%;
						height: 100%;

						.priceText {
							font-size: 28rpx;
							line-height: 1;
							font-weight: 500;
							color: #FFFFFF;
						}

						.texttips {
							font-size: 24rpx;
							font-weight: 400;
							color: #FFFFFF;
						}
					}

					.leftsharebox {
						background: linear-gradient(-90deg, #FC3653, #F87721);
					}

					.rightbackbox {
						background: linear-gradient(-90deg, #7619EC, #A429F3);
					}
				}
			}
		}
	}
</style>
